<template>
    <div class="sys-container">
        <div class="main">
            <div class="left"><img :src="sys.avatar" alt="" /></div>

            <div class="right">
                <div class="top">
                    <p class="sysname">{{ sys.systemname }}<span v-if="sys.status > 0">（默认）</span></p>

                    <p class="user-id">ID:{{ sys.uid }}</p>
                </div>
                <div class="bottom">
                    <div class="money">
                        <span>余额：{{ sys.balance }}</span>
                    </div>
                    <div class="btn-wrapper">
                        <!--非默认帐号 显示聚合余额按钮-->
                        <div class="sys-btn" v-if="!(sys.status == 1 && isDeBrand)" @click.stop="polyMoney">聚合余额</div>
                        <svg class="icon" aria-hidden="true" v-if="!showExtra" @click.stop="toggleExtra"><use xlink:href="#icon-expandmore"></use></svg>
                        <svg class="icon" aria-hidden="true" v-if="showExtra" @click.stop="toggleExtra"><use xlink:href="#icon-expandless"></use></svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="extra" v-if="showExtra">
            <div class="item">
                <p>{{ sys.nickname }}</p>
                <div class="sys-btn" v-if="sys.status != 1" @click.stop="setDefaultSys">设为默认</div>
            </div>
            <div class="item">
                <p>{{ sys.role }}</p>
                <div class="sys-btn" v-if="sys.status != 1" @click.stop="deleteSys">删除</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sys-card',
    data() {
        return {
            showExtra: false
        };
    },
    props: {
        sys: {
            type: Object,
            isRequired: true
        },
        isDeBrand: {
            type: Boolean,
            default: false
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        polyMoney() {
            this.$emit('polyMoney', this.sys);
        },
        toggleExtra() {
            this.showExtra = !this.showExtra;
        },
        setDefaultSys() {
            this.$emit('setDefaultSys', this.sys);
        },
        deleteSys() {
            this.$emit('deleteSys', this.sys);
        }
    },
    watch: {},
    components: {}
};
</script>

<style lang="stylus" scoped>
@import '~assets/main.styl'

*{
    box-sizing border-box
}

.sys-container{
    margin-bottom titleMargin
    .main {
        position: relative
        width: 100vw
        height vh(92)
        padding cellPadding cellPadding smallMargin cellPadding
        background grayF
        flex-x(space-between,flex-start)
        .left {
            /*height vh(40)*/
            flex 0
            margin-right cellPadding
            flex-x()
            img{
                width vw(38)
                height vw(38)
                border-radius all-radius
            }
        }

        .right {
            height vh(63)
            flex 1 0 auto
            flex-y(space-between,flex-start)
            .top{
                position relative
                width 100%
                height vh(38)
                flex-y(space-between,flex-start)
                padding vh(3) 0
                .sysname{
                    word-vw(word14,gray3)
                    line-height vh(19)
                }
                .user-id{
                    word-vw(word12,gray3)
                    line-height vh(16)
                }
            }

            .bottom{
                width 100%
                /*height vh(38)*/
                flex-x()
                padding 0
                .money{
                    span{
                        word-vw(word12,gray3)
                        line-height vh(16)
                    }
                }
                .btn-wrapper{
                    flex 1
                    text-align right
                    flex-x(flex-end,center)
                    span{
                        word-vw(word12,gray3)
                        line-height vh(16)
                        margin-right smallMargin
                    }
                    .sys-btn{
                        small-hollow()
                        width vw(72)
                        height vw(22)
                        line-height vw(18)
                        font-size word12
                        margin-right cellPadding
                        color gray3
                        background-color grayF
                    }
                    .icon{
                        width vw(14)
                        height vh(10)
                        fill main-color
                    }
                }
            }
        }
    }
    .extra{
        width vw(345)
        height vh(80)
        margin vh(1) cellPadding 0 cellPadding
        padding vh(14) vw(23) vh(14) vw(28)
        background-color grayF
        flex-y(space-between,flex-start)
        .item{
            width 100%
            flex-x()
            p{
                word-vw(word12,gray3)
                line-height vh(16)
            }
            .sys-btn{
                small-hollow()
                width vw(60)
                height vh(18)
                line-height vh(18)
                font-size word10
                color gray3
                background-color grayF
            }
        }

    }
}
</style>
